import React from 'react';
import { Button, Form, Input, message } from 'antd';
import './index.css';
import { useNavigate, useLocation } from 'react-router-dom';
import { login } from '../../services/user';
import { GlobalContext } from '../../contexts/GlobalContext';
import { useContext } from 'react';

const App = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const globalContext = useContext(GlobalContext);

    const onFinish = (values) => {
        login(values).then((res) => {
            console.log(res);
            const { code, msg, result } = res.data;
            if (code === 1) {
                message.success(msg);
                localStorage.setItem('username', res.data.result.username);
                // 存储全局user数据
                globalContext.dispatch({ type: 'login', param: result });
                // 获取来源页面路径，如果没有来源页面，则跳回根路径
                const redirectPath = location.state?.from || '/';
                navigate(redirectPath);
            } else {
                message.error(msg);
            }
        });
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    return (
        <div className="login-page" style={{ width: '414px', height: '896px' }}>
            <h1 style={{ textAlign: 'center', marginTop: '20px' }}>欢迎回来</h1>
            <div className="center-container" style={{alignItems:"center",justifyContent:"center"}}>
                <Form
                    name="basic"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 24 }}
                    style={{ width: 300, margin: '0 auto' }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请输入用户名',
                            },
                        ]}
                    >
                        <Input placeholder="user/123456" />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码',
                            },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" block style={{ backgroundColor: '#FE4E84', marginBottom: '10px', borderRadius: 20 , textAlign: 'center'}}>
                            登录
                        </Button>
                        <Button type="primary" block style={{ backgroundColor: '#FE4E84', borderRadius: 20 }}>
                            获取体验账号
                        </Button>
                    </Form.Item>
                    <p style={{ textAlign: 'center', marginTop: '10px' }}>
                        <a href="#">忘记密码</a>
                    </p>
                </Form>
                <p style={{ textAlign: 'center', marginTop: '10px' }}>
                    还没有账号？<a href="#">马上注册</a>
                </p>
            </div>
        </div>
    );
};

export default App;